<template>
  <div class="shen">
    <span class="borderNone">
      <p class="shenqing">出库单基本信息</p>
      <table border="1" rules="all" class="tablestyle" style="width: 1100px">
        <tr>
          <td style="height: 34px;text-align: center;">出库仓库</td>
          <td >
            <treeselect  class="option" v-model="companyId" :options="deptOptions" placeholder="请选择所属部门" />
          </td>
          <td style="width: 164px;height: 34px;text-align: center;">出库时间</td>
          <td style=" padding-left: 10px;">
            2020-06-09
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">领料人</td>
          <td>
            <el-select v-model="rklexing" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in optionslexing"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </td>
          <td style="text-align: center;">领料单</td>
          <td style=" padding-left: 10px;cursor: pointer" @click="cgjhBtn">
            <span style="display: inline-block;width: 200px;" > {{shenqingxinxi.caigoujihua}}</span>
          </td>
        </tr>
        <tr>
          <td style="width: 164px;height: 53px;text-align: center;">备注</td>
          <td  colspan="3" style="width: 415px" class="beizhu">
            <el-input
              type="textarea"
              autosize
              :autosize="{ minRows: 2, maxRows: 2}"
              placeholder="请输入内容"
              v-model="shenqingxinxi.beizhu">
            </el-input>
          </td>
        </tr>
      </table>


      <p class="shenqing">入库单明细</p>
      <div style="margin-left: 15px;margin-bottom: 15px">
        <el-button type="primary"  icon="el-icon-plus" size="mini" @click="choose">添加</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBtn">删除</el-button>
      </div>

      <el-table  :data="tableDatajihua" stripe style="margin-left: 15px;width: 1100px"
                 @selection-change="handleSelectionChange"
                 border>
        <el-table-column align="center" type="selection" width="80"></el-table-column>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="产品编号" property="jhdh" width="200" ></el-table-column>
        <el-table-column align="center" label="产品名称" property="biaoti" :show-overflow-tooltip="true"  ></el-table-column>
        <el-table-column align="center" label="单位"  property="danwei"  ></el-table-column>
         <el-table-column align="center" label="规格型号"  property="dqjd" :show-overflow-tooltip="true" ></el-table-column>
         <el-table-column align="center" label="品牌" property="spjssj"  :show-overflow-tooltip="true" > </el-table-column>
        <el-table-column align="center" label="入库数量"  property="cgsl" width="100" >
          <template slot-scope="scope">
            <el-input v-model="scope.row.cgsl" placeholder="" @change="shulaingBtn(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单价" property="jhje" align="center" width="100">
          <template slot-scope="scope">
            <el-input v-model="scope.row.jhje" placeholder="" @change="yjdjBtn(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="平均价" property="xiaoji"  :show-overflow-tooltip="true" ></el-table-column>
        <el-table-column align="center" label="总价" property="xiaoji"  :show-overflow-tooltip="true" ></el-table-column>
      </el-table>
    </span>
    <div class="shenqing" style="margin-top: 15px;width: 30%">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-change="handleChange"
        :file-list="fileList">
        <el-button type="warning" icon="el-icon-folder-add" size="mini" >相关附件</el-button>
      </el-upload>
    </div>
    <div style="text-align: center;margin-top: 50px;width: 1100px">
      <el-button type="success"  icon="el-icon-plus" size="mini" @click="tijiao">确定</el-button>
    </div>
    <add-Product :addProductData="transmitData" v-if="addshow" @addProductBack="callback" ></add-Product>
    <cgjhd-Dialog v-if="jihuadShow" :qzsdData="jihuaData" @qzysdBack="jhdback" ></cgjhd-Dialog>

  </div>
</template>

<script>
  import Treeselect from "@riophae/vue-treeselect";
  import {treeselect } from "@/api/system/dept";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import addProduct from "./addChanpinDialog";
  import cgjhdDialog from "./llsqdDialog"
  export default {
    name: "Role",
    components:{
      addProduct,
      cgjhdDialog,
      Treeselect,
    },
    data() {
      return {
        treedata: [],
        defaultProps: {
          children: "children",
          label: "label"
        },
        companyId: undefined,
        deptOptions:[],
        gysValue:'',
        rklexing:'',
        optionsgys:[
          {value:'1',label:'杜月明'},
          {value:'2',label:'老八'},
          {value:'3',label:'小六'},
        ],
        optionslexing:[
          {value:'1',label:'张三'},
          {value:'2',label:'李四'},
          {value:'3',label:'刘亦菲'},
        ],
        jihuaData:{},//传给计划单弹框的数据
        jihuadShow:false,//计划单弹框
        addshow:false,
        transmitData:{},//传给子集的数据
        shuliangSum:0,//总数量
        jinesum:0,//总金额
        tableDataxunz:'',
        dialogVisible:false,
        fileList: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }],
        optionsleixing:[
          {value:'1',label:'设备采购'},
          {value:'2',label:'备件消耗材料采购'}
        ],//类型数据
        optionscgzq:[//采购周期
          {value:'1',label:'年'},
          {value:'2',label:'季'},
          {value:'3',label:'月'}
        ],
        //单位数据
        optionsdanwei:[
          {value:'1',label:'支'},
          {value:'2',label:'桶'},
          {value:'3',label:'箱'},
          {value:'4',label:'把'},
          {value:'5',label:'克'},
          {value:'6',label:'卷'},
        ],
        //总数居
        shenqingxinxi:{
          inputBiaoTi:'ceshi',//标题
          leixngXL:'1',//类型下拉
          cgzq:'1',//采购周期
          nianfen:'',//年份
          jidu:'',//季度
          beizhu:'',//备注
          ghriqi:'',//日期
          caigoujihua:'',//采购计划
        },
        //采购信息
        caigouxinxi: {
          inputBiaoTi:'',//标题
          ghsj:'',//供货时间
          cgjh:'',//采购计划
          gouzhiliyou:'',//购置理由
          beizhu:'',//备注
        },
        tableDatajihua:[
          { index:'0',jhdh:'HC2018121300110',biaoti:'运输车',danwei:'1',cglx:'1000吨',cgsl:'2',jhje:'123',cjrq:'小米',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'1',spjssj:'ceshi',xiaoji:'246'},
          { index:'1',jhdh:'HC2018121300112',biaoti:'运输车',danwei:'2',cglx:'1000吨',cgsl:'2',jhje:'123',cjrq:'小米',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'1',spjssj:'ceshi',xiaoji:'246'},
          { index:'2',jhdh:'HC2018121300113',biaoti:'运输车',danwei:'1',cglx:'1000吨',cgsl:'2',jhje:'123',cjrq:'小米',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'1',spjssj:'ceshi',xiaoji:'246'},
          { index:'3',jhdh:'HC2018121300114',biaoti:'运输车',danwei:'2',cglx:'1000吨',cgsl:'2',jhje:'123',cjrq:'小米',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'1',spjssj:'ceshi',xiaoji:'246'},
        ],
        tableDatajihuaXZ:[],//选中的数据
      };
    },

    created() {
      console.log('接收参数',this.$route.query)
      this.hejisum()
      this.getTreeselect()
    },
    methods: {
      /** 查询类别下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      cgjhBtn:function(){
        console.log('采购申请')
        var pp={
          id:'123456'
        }
        this.jihuaData=pp
        this.jihuadShow = true
      },
      //计划单弹框回调函数
      jhdback:function(msg){
        this.jihuadShow= false
        this.shenqingxinxi.caigoujihua = msg.code
        console.log('返回数据',msg)
      },
      //弹框关闭回调函数
      callback:function(msg){
        this.addshow= false
        console.log('返回数据',msg)
      },

      //附件删除
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      //表格复选框监听
      handleSelectionChange:function(row){
        this.tableDatajihuaXZ = row
        console.log(' this.tableDatajihuaXZ', this.tableDatajihuaXZ)

      },
      //类型监听
      leixingchange:function(row){
        console.log('row',row)

      },
      //添加
      add:function () {
        console.log('添加')
        var indexSun = this.tableDatajihua.length
        this.tableDatajihua.push(
          { index:indexSun,jhdh:'',biaoti:'',danwei:'',cglx:'',cgsl:'',jhje:'',cjrq:'',cjren:'',beizhu:'',dqjd:'',spzt:'',spjssj:'',xiaoji:''},
        )

      },

      //删除
      deleteBtn:function () {
        for (var i=0;i< this.tableDatajihua.length;i++){
          for(var j=0;j<this.tableDatajihuaXZ.length;j++){
            if(this.tableDatajihua[i].index==this.tableDatajihuaXZ[j].index){//相等
              this.tableDatajihua.splice(i,1)
            }

          }
        }
        console.log(' this.tableDatajihua', this.tableDatajihua)
        this.fuzhiIndex()
      },
      //重新赋值index
      fuzhiIndex:function(){
        for (var i=0;i<this.tableDatajihua.length;i++){
          this.tableDatajihua[i].index =i
        }
      },
      //选择
      choose:function () {
        // this.dialogVisible = true
        this.addshow=true
        var pp={
          id:'2222222222'
        }
        this.transmitData=pp

      },
      //产品表格监听
      chanpinonChange(val) {
        console.log(val)
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //数量监听事件
      shulaingBtn:function (row) {
        console.log(row)
        row.xiaoji = (row.cgsl*1)* (row.jhje*1)
        this.hejisum()
      },
      //单价监听事件
      yjdjBtn:function (row) {
        console.log(row)
        row.xiaoji = (row.cgsl*1)* (row.jhje*1)
        this.hejisum()
      },
      //合计
      hejisum:function () {
        var shuchushi=0
        var jinechushi=0
        for (var i=0;i<this.tableDatajihua.length;i++){
          shuchushi =shuchushi + (this.tableDatajihua[i].cgsl)*1
          jinechushi = jinechushi+ (this.tableDatajihua[i].xiaoji)*1

        }
        this.shuliangSum = shuchushi
        this.jinesum = jinechushi

      },
      tijiao:function () {
        this.$router.push('/consumable/ckgl')
      },


    }
  };
</script>
<style >
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }

  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .shen .borderNone .el-input--medium .el-input__inner {
    border: none;
  }
  .leixing .el-select{
    width: 100%;
  }
  .caigoustyle {
    width: 100%;

  }
  .shen .beizhu .el-textarea__inner {
    border: none;
  }
  .chuanpin {

  }




</style>
